<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>控制SPWM</title>
</head>
<body>
  <style>
    input{
      width: 100px;
    }
  </style>
  <center>
    <p>设定sin函数的参数</p>
    <p>点击按钮发送控制参数到单片机</p>
    <p>
      变化频率<input type="number" placeholder="1~100" id="freq">Hz
    </p>
    <p>
      最大电压<input type="number" placeholder="0~5" id="max_v">V
    </p>
    <p>
      最小电压<input type="number" placeholder="0~5" id="min_v">V
    </p>
    <p>
      控制时间<input type="number" placeholder="1~10" id="time_int">ms
    </p>
    <button onclick="send_data()">发送</button>
    <p>反馈数据: <span id="feedback"></span></p>
  </center>
  <script>
    function send_data() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200) {
          document.getElementById("feedback").innerHTML = this.responseText;
        }
      };
      // the GET method, sendLED request, with argument pin_choice = pin_number, asynchonize is true
      // the arguments are strings
      ids = ["freq", "max_v", "min_v", "time_int"]
      send_str = ""
      
      for(i = 0; i<ids.length; i++)
      {
        send_str += document.getElementById(ids[i]).value
        if(i!=ids.length)
          send_str += ":"
      }
      console.log(send_str)
      xhttp.open("GET","set_para?para="+send_str,true);
      xhttp.send();
  }
  </script>
</body>
</html>